<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="root.css">
    <link rel="stylesheet" href="navbar.css">
    <link rel="stylesheet" href="banner.css">
    <link rel="stylesheet" href="content.css">
    <link rel="stylesheet" href="widget-info.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css?family=Arvo:400,700|Cookie" rel="stylesheet" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <title>Lesson</title>
</head>
<body>

<div class="container">
    <div class="header">
        <div class="navbar">
            <div class="navbar__logo">
                <span class="font_dancing-script font_dancing-script_logo">Elysa4t</span>
            </div>
            <div class="navbar__links">
                <a class="navbar__link navbar__link_selected" href=""><span class="navbar__link-text">Home</span></a>
                <a class="navbar__link" href="#"><span class="navbar__link-text">Archives</span></a>
                <a class="navbar__link" href="#"><span class="navbar__link-text">Gallery</span></a>
                <a class="navbar__link" href="#"><span class="navbar__link-text">About</span></a>
                <a class="navbar__link" href="#"><span class="navbar__link-text">Contact</span></a>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="banner">
        <img class="banner__image" src="/assets/banner-image.jpg" alt="">
        <p class="banner__label font_dancing-script font_dancing-script_label">Lorem ipsum dolor sit amet, consectetur
            adipisicing elit.</p>
    </div>
</div>

<div class="container">
    <div class="content">
        <div class="content__block">
            <div class="content__mark">
                <p>Posted by <span style="text-decoration: underline">Someone</span> on April 14, 2012</p>
            </div>
            <div class="content__body">
                <h2 class="content__title">Lorem ipsum dolor sit amet.</h2>
                <img class="content__img" src="/assets/pics01.jpg" alt="">
                <p class="content__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem commodi culpa cum cumque deleniti dignissimos eaque eius enim eos est expedita facere facilis harum incidunt ipsa iste, maxime nam nemo perferendis praesentium quas sapiente sed veritatis voluptas, voluptatem voluptatum? Ducimus explicabo fugit obcaecati sit tempore. Distinctio iure officiis tempore!</p>

                <div class="content__info">
                    <div class="content__categories">Posted in
                        <span class="content__category">News</span>,
                        <span class="content__category">Design</span>,
                        <span class="content__category">Other</span>
                    </div>
                    <div class="content__comment">235 Comments</div>
                </div>

            </div>
        </div>

        <div class="content__menu">
            <div class="content-menu__top"></div>
            <div class="content-menu__block">
                <div class="content__mark">About Elysa4t</div>
                <div class="content-menu__wrapper">
                    <p class="content-menu__text" style="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur dolorum,
                        voluptatum, velit voluptatibus</p>
                </div>
            </div>
            <div class="content-menu__block">
                <div class="content__mark">Recent Post</div>
                <div class="content-menu__wrapper">
                    <p class="content-menu__last-post">Lorem ipsum dolor sit amet.</p>
                    <p class="content-menu__last-post">Lorem ipsum dolor sit amet.</p>
                    <p class="content-menu__last-post">Lorem ipsum dolor sit amet.</p>
                    <p class="content-menu__last-post">Lorem ipsum dolor sit amet.</p>
                    <p class="content-menu__last-post">Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
            <div class="content-menu__block">
                <div class="content__mark">Something Else</div>
                <div class="content-menu__wrapper">
                    <p class="content-menu__text">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur debitis est fugit illo nostrum!
                    </p>
                </div>
            </div>
            <div class="content-menu__bottom"></div>
        </div>
    </div>
</div>
<div class="container">
    <div class="widgets-info__wrapper">
        <div class="widgets-info">
            <div class="widget-info">
                <div class="widget-info__top"></div>
                <div class="widget-info__content">
                    <div class="widget-info__title">Lorem ipsum dolor.</div>
                    <div class="widget-info__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ducimus eum ex laudantium placeat qui!</div>
                </div>
                <div class="widget-info__bottom"></div>
            </div>
            <div class="widget-info">
                <div class="widget-info__top"></div>
                <div class="widget-info__content">
                    <div class="widget-info__title">Lorem ipsum dolor.</div>
                    <div class="widget-info__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ducimus eum ex laudantium placeat qui!</div>
                </div>
                <div class="widget-info__bottom"></div>
            </div>
            <div class="widget-info">
                <div class="widget-info__top"></div>
                <div class="widget-info__content">
                    <div class="widget-info__title">Lorem ipsum dolor.</div>
                    <div class="widget-info__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ducimus eum ex laudantium placeat qui!</div>
                </div>
                <div class="widget-info__bottom"></div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="copyright">© Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum laboriosam magni molestias neque sunt voluptas.</div>
</div>
</body>
</html>